<template>
  <div class="box_list">
    <!-- 路径面包屑区域 -->
    <el-breadcrumb class="mb15">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 工作区域 -->
    <div class="box_content">
      <el-card>
        <!-- 查询区域 -->
        <el-row :gutter="15">
          <el-col :span="5" :offset="0">
            <el-input
              v-model="queryInfo.query"
              placeholder="输入关键字"
              size="small"
              clearable
              @clear="getOrderList"
            >
              <el-button
                type="primary"
                slot="append"
                size="small"
                icon="el-icon-search"
                @click="getOrderList"
              ></el-button>
            </el-input>
          </el-col>
        </el-row>
        <!-- 列表区域 -->
        <el-table :data="orderData" border stripe class="mt15">
          <el-table-column
            type="index"
            label="序号"
            width="50"
            align="center"
          ></el-table-column>

          <el-table-column
            label="订单编号"
            prop="order_number"
          ></el-table-column>
          <el-table-column
            label="订单价格"
            prop="order_price"
            width="150"
            align="center"
          ></el-table-column>
          <el-table-column
            label="是否付款"
            prop="pay_status"
            width="150"
            align="center"
          >
            <template slot-scope="scope">
              <el-tag type="danger" v-if="scope.row.pay_status == 0"
                >未付款</el-tag
              >
              <el-tag type="success" v-else>已付款</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="是否发货"
            prop="is_send"
            width="150"
            align="center"
          ></el-table-column>
          <el-table-column
            label="下单时间"
            prop="create_time"
            width="190"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.create_time | dateFormat }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template>
              <el-button type="primary" icon="el-icon-edit" size="mini"
                >修改</el-button
              >
              <el-button type="danger" icon="el-icon-location" size="mini"
                >位置</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- table 分页功能 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pagenum"
          :page-sizes="[1, 5, 8, 10]"
          :page-size="queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 查询参数
      queryInfo: {
        query: "",
        pagenum: 1,
        pagesize: 5,
        user_id: 1,
        pay_status: "",
        is_send: "",
        order_fapiao_title: "",
        order_fapiao_company: "",
        order_fapiao_content: "",
        consignee_addr: "",
      },
      //列表数据参数
      orderData: [],
      //总数
      total: 0,
    };
  },
  created() {
    this.getOrderList();
  },
  methods: {
    // 获取当前订单列表
    getOrderList() {
      this.$axios
        .get("orders", { params: this.queryInfo })
        .then((res) => {
          if (res.data.meta.status == 200) {
            this.orderData = res.data.data.goods;
            this.total=res.data.data.total
          } else {
            this.$message.error("当前数据订单列表获取失败");
          }
          console.log(res);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 显示条数
    handleSizeChange(newSize) {
      console.log(newSize)
      this.queryInfo.pagesize = newSize;
      this.getOrderList();
    },
    // 显示页数
    handleCurrentChange(newPage) {
      console.log(newPage)
      this.queryInfo.pagenum = newPage;
      this.getOrderList();
    },
  },
};
</script>

<style scoped>
</style>